<link href="/static/css/index.css?v=2017630" rel="stylesheet" type="text/css">
<header>
    <div class="box">
        <div class="title">雄鹰杯大赛 | 联系我们：0755-88292166</div>
        <a class="reg-btn" href="/home/index/register">马上报名</a>
    </div>
</header>
<div class="m-slider" id="m-slider">
    <ul id="slider" class="slider">
        {foreach $banner.content as $item}
        <li style="background: url({$item.image}) no-repeat center / cover "></li>
        {/foreach}
    </ul>
    <a class="pre"></a>
    <a class="next"></a>
    <div class="tips">
    </div>

</div>
<script>
	//滚动屏幕
	var MSlider=function (option)
	{
		this.limitCallBack=option.limitCallBack;
		this.page_tip=$(option.page_tip);
		this.tips=$(option.tips);
		this.slider=$(option.slider);
		this.total=option.total;
		this.show_total=option.show_total;
		this.index=option.index || 0;
		this.wh=$(window).height();
		this.ww=$(window).width();
		this.start_points={x:0,y:0,time:0};
		this.end_points={x:0,y:0};
		this.start_x=0;
		this.end_x=0;
		this.slider_offset=this.ww/4;
		this.slider_type='horizontal';//vertical
        this.loop=true;
        this.auto_run=option.auto_run !== undefined ? option.auto_run : true ;
		var self=this;

		this.pre=function ()
		{
			if(self.index !== 0){
				self.index -= 1;
			}else{
				if(self.loop){
					self.index=self.show_total-1;
				}
			}
			self.setPage();
		};
		this.next=function ()
		{
			if(self.index < self.show_total-1){
				self.index += 1;

			}else{
				if(self.loop){
					self.index=0;
				}
				self.limitCallBack(self.index);
			}
			self.setPage();
		};
		this.autoRun=function ()
		{
          setTimeout(function ()
					 {
                         self.next();
                         self.autoRun();
					 },3000);
		};
		//更新索引提示
		this.updateTips=function ()
		{
			self.tips.find(".item").removeClass('on');
			self.tips.find(".item").eq(self.index).addClass('on')
		};
		//更新页码提示
		this.updatePageTip=function ()
		{
			//self.page_tip.text((self.index+1)+"/"+self.total);
		};
		//定位到index所在页
		this.setPage=function ()
		{
			self.slider.addClass("doing");
			self.slider.css("left",-self.index*self.ww + 'px');
			this.updatePageTip();
			this.updateTips();
		};

        //计算尺寸
		this.init=function ()
		{
			this.slider.css("width",(this.show_total*this.ww)+"px");
			this.slider.find("li").css("width",this.ww+"px");
			//this.slider.parent().css("height",(this.wh)+"px");
			//初始化索引标识
			var tips_item='';
			for(var i=0; i<this.show_total;i++){
				tips_item+='<span class="item"></span>'
			}
			this.tips.html(tips_item);
			//纠正默认下标
			if(this.index >= this.show_total && this.show_total < this.total){
				self.limitCallBack(self.index);
				this.index=this.show_total-1;
			}
			if(this.auto_run === true){
				self.autoRun();
			}
			self.setPage();
		};
		this.init();
		this.slider.on("touchstart",function (e)
		{
			console.log('sss');
			var event=e.originalEvent;
			var touch = event.targetTouches[0];
			self.start_points = {x:touch.pageX,y:touch.pageY,time:+new Date};
			self.start_x=touch.screenX;
			self.end_x=touch.screenX;
			self.slider.removeClass("doing");
		});
		this.slider.on("touchmove",function (e)
		{
			var event=e.originalEvent;
			if(event.targetTouches.length > 1 || event.scale && event.scale !== 1) return;
			var touch = event.targetTouches[0];
			self.end_points = {x:touch.pageX - self.start_points.x,y:touch.pageY - self.start_points.y};
			//滑动类型-垂直，水平
			self.slider_type = Math.abs(self.end_points.x) < Math.abs(self.end_points.y) ? "vertical":"horizontal";
			if(self.slider_type === "horizontal"){
				e.preventDefault();
				self.slider.css("left",(-self.index*self.ww + self.end_points.x) + 'px');
			}
			self.end_x =touch.screenX;
		});
		this.slider.on("touchend",function (e)
		{
			var distance=Math.abs(self.end_x-self.start_x);
			//var duration = +new Date - self.start_points.time;
			if(self.slider_type === "horizontal" && distance >= self.slider_offset){
				if(self.end_points.x > 10){
					self.pre();
				}else if(self.end_points.x < -10){
					self.next();
				}
			}
			self.setPage();
		});

	};
	//滑动画册
	var total={:count($banner.content)};
	var m_slider=new MSlider({slider:"#slider",total:total,show_total:total,tips:".tips",limitCallBack:function (index){}});
	$("#m-slider .pre").on("click",function ()
	{
		m_slider.pre();
	});
	$("#m-slider .next").on("click",function ()
	{
		m_slider.next();
	});
</script>
<div class="box about-panel">
    <div class="title-panel">
        <div class="top">ABOUT XIONGYING</div>
        <div class="title">关于大赛</div>
    </div>

    <div class="vr">
        <div class="pull-left w5 ">{$media['content'][0]['org_content']}</div>
        <div class="pull-left w5 ">
            <h4 class="text-center">{$desc['content'][0]['title']}</h4>
            <div class="desc">{$desc['content'][0]['content']}<a class="text-primary" style="margin-left: 10px;" target="_blank"  href="{$desc['content'][0]['url']}">查看详细内容</a></div>
        </div>
    </div>
</div>

<div class="photo-panel">
    <div class="bg"></div>
    <div class="box text-white">
        <div class="title-panel">
            <div class="top">PHOTOS</div>
            <div class=""><span class="title" style="color: #fff">精彩图集</span></div>
        </div>
        <div class="box-tips"><a href="/home/index/photos">更多大赛精彩瞬间</a></div>
        <div class="photo-list">
            {foreach $pics.content as $key=>$item}
            {if condition="$key < 8"}
            <div class="item" style="background: url({$item.image}) no-repeat center / cover;"></div>
            {/if}
            {/foreach}
        </div>
    </div>
</div>
<div class="box news-panel">
    <div class="title-panel">
        <div class="top">NEWS</div>
        <div class="title">媒体报道<a class="pull-right" href="/home/index/news">更多</a></div>
    </div>
    <div class="pull-left w5">
        <ul class="ad-list">
            {foreach $ad_1_list as $key=>$item}
            <li><div class="img" style="background: url({$item.image}) no-repeat center / contain;"></div><a target="_blank" href="{$item.url}">{$item.title}</a></li>
            {/foreach}
        </ul>
    </div>
    <div class="pull-left w5">
        <ul class="ad-list">
            {foreach $ad_2_list as $key=>$item}
            <li><div class="img" style="background: url({$item.image}) no-repeat center / contain;"></div><a target="_blank" href="{$item.url}">{$item.title}</a></li>
            {/foreach}
        </ul>
    </div>
</div>

<div class="text-center fs16 pic-panel">
    <div class="title-panel">
        <div class="top">RATER</div>
        <div ><span class="title">评委</span></div>
    </div>
    <p><img src="/static/image/pw.png"></p>
    <div class="box">
        <div class="pic-list-2" id="slider-2">
            {foreach $pw_1_list as $item}
            <div class="item" data-content="{$item.content}"  data-title="{$item.title}" data-img="{$item.image}">
                <a target="_blank" href="{$item.url}"><div class="img" style="background: url({$item.image}) no-repeat center / cover;"></div>
                    <div class="desc">
                        <h3>{$item.title}</h3>
                        <p>{$item.sub_content}</p>
                    </div></a>
            </div>
            {/foreach}
        </div>
    </div>
</div>

<div class="text-center fs16 pic-panel">
    <div class="title-panel">
        <div class="top">GUEST</div>
        <div ><span class="title" >嘉宾</span></div>
    </div>
    <p><img src="/static/image/jb.png"></p>
    <div class="box">
        <div class="pic-list" >
            {foreach $jb_list.content as $item}
            <a target="_blank"  href="{$item.url}" class="item" data-content="{$item.content}" data-title="{$item.title}" data-img="{$item.image}">
                <div class="img" style="background: url({$item.image}) no-repeat center / cover;"></div>
                <div class="desc">
                    <h3>{$item.title}</h3>
                    <p>{$item.sub_content}</p>
                </div>
            </a>
            {/foreach}
        </div>
    </div>
</div>

<div class="wy-panel">
    <div class="box">
        <div class="title-panel">
            <div class="top">DINNER</div>
            <div class="title">晚宴</div>
        </div>
        <div class="dinner-list">
            {foreach $pics_dinner.content  as $key=>$item}
            {if condition="$key < 3"}
            <div class="item" style="background: url({$item.image}) no-repeat center / cover;"></div>
            {/if}
            {/foreach}
        </div>
        <div class="dinner-list-2">
            {foreach $pics_dinner.content as $key=>$item}
            {if condition="$key > 2"}
            <div class="item" style="background: url({$item.image}) no-repeat center / cover;"></div>
            {/if}
            {/foreach}
        </div>
    </div>
</div>

<div class="box media-panel">
    <div class="title-panel">
        <div class="top">MEDIA</div>
        <div class="title" >精彩视频</div>
    </div>
    <div class="media-list">
        {foreach $media_list.content as $item}
        <a target="_blank"  class="item" href="{$item.url}">
            <div class="img" style="background: url({$item.image}) no-repeat center / cover;"></div>
            <div class="desc">
                <h3>{$item.title}</h3>
                <div>{$item.content}</div>
            </div>
        </a>
        {/foreach}
    </div>
</div>

<div class="history-panel">
    <div class="box">
        <div class="title-panel">
            <div class="top">HISTORY</div>
            <div class="title">往期回顾</div>
        </div>
        <div class="history-list">
            {foreach $history.content as $item}
            <a target="_blank"  class="item" href="{$item.url}">
                <div class="img" style="background: url({$item.image}) no-repeat center / cover;"></div>
                <div class="desc">
                    <h3>{$item.title}</h3>
                    <p>{$item.sub_content}</p>
                </div>
            </a>
            {/foreach}
        </div>
    </div>
</div>
<div class="sponsor-panel">
<div class="box">
    <div class="title-panel mobile-title">
        <div class="top">SPONSOR</div>
        <div ><span class="title">赞助商</span></div>
    </div>
    <img src="{$sponsor.image}" width="100%">
</div>
</div>
<script type="text/html" id="detail-tpl">
    <div class="detail-panel">
        <div class="img"></div>
        <div class="title"></div>
        <div class="content"></div>
    </div>
</script>
<script>
    var area=is_mobile?['90%','90%']:['400px','60%'];

    function showDetail(title,content,img)
	{
        layer.open({
            type:1,
            title:'详细信息',
            content:$("#detail-tpl").html(),
            shade:[0.7],
            area:area
        });
		$(".detail-panel .img").css("background","url("+img+") no-repeat center / cover");
		$(".detail-panel .title").text(title);
		$(".detail-panel .content").text(content);
	}
	$(".pic-list .item,.pic-list-2 .item").on("click",function ()
	{
		//showDetail($(this).data('title'),$(this).data('content'),$(this).data('img'));
	});


    var VerSlider=function (options)
	{
        this.silder=options.slider;
        this.prev_btn=options.prev;
        this.next_btn=options.next;
        this.index=0;
        var self=this;
        this.scrollNav=function (target,type)
        {
          setTimeout(function () {
              if(type==1){
                  self.index+=5;
                  self.silder.scrollLeft(parseInt(self.index));
                  if(self.index<target){
                      self.scrollNav(target,type);
                  }
              }else {
                  self.index-=5;
                  self.silder.scrollLeft(parseInt(self.index));
                  if(self.index>target){
                      self.scrollNav(target,type);
                  }
              }

          },1);
        };
        this.prev=function ()
        {
          var left =self.silder.scrollLeft();
          self.index = left;
          self.scrollNav(left - 650, 0)
        };
        this.next=function ()
        {
          var left=self.silder.scrollLeft();
          self.index=left;
          self.scrollNav(left+650,1)
        };

        this.prev_btn.on("click",function ()
        {
            self.prev();
        });
        this.next_btn.on("click",function ()
        {
            self.next();
        });
	};

	/*var v_slider=new VerSlider({slider:$("#m-slider-2"),prev:$("#pre-2"),next:$("#next-2")});
	var v_slider_2=new VerSlider({slider:$("#m-slider-3"),prev:$("#pre-3"),next:$("#next-3")});
*/
</script>